<template>
  <div class="AdminInfo">
    <el-row class="userForm">
      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }">
          <div class="image">
            <el-upload
              class="avatar-uploader"
              action="/admin/userface"
              :headers="header"
              :data="admin"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <el-image
                style="width: 150px; height: 150px;border-radius: 50%"
                :src="admin.userFace"
                v-if="admin.userFace"
              ></el-image>
            </el-upload>
          </div>
          <div style="padding: 50px">
            <el-form ref="form" :model="admin">
              <el-form-item>
                <el-tag type="primary" class="info_tag">用户名</el-tag>
                <el-input
                  :disabled="updateInfo"
                  v-model="admin.name"
                  size="medium"
                  class="info_input"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-tag type="primary" class="info_tag">手机号码</el-tag>
                <el-input
                  :disabled="updateInfo"
                  v-model="admin.phone"
                  size="medium"
                  class="info_input"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-tag type="primary" class="info_tag">电话号码</el-tag>
                <el-input
                  :disabled="updateInfo"
                  v-model="admin.telephone"
                  size="medium"
                  class="info_input"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-tag type="primary" class="info_tag">联系地址</el-tag>
                <el-input
                  :disabled="updateInfo"
                  v-model="admin.address"
                  size="medium"
                  class="info_input"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <div>
                  <el-tag type="primary">用户角色</el-tag>
                </div>
                <div>
                  <el-tag
                    :disabled="updateInfo"
                    class="info_input"
                    type="success"
                    v-for="(r, index) in admin.roles"
                    :key="index"
                    >{{ r.nameZh }}</el-tag
                  >
                </div>
              </el-form-item>
            </el-form>
            <div class="bottom clearfix">
              <el-button
                type="primary"
                class="button info_input"
                @click="updateInfo = false"
                v-if="updateInfo === true"
                >更新</el-button
              >
              <el-button
                type="primary"
                class="button info_input"
                @click="doAdminInfoUpd"
                v-if="updateInfo === false"
                >提交更新</el-button
              >
              <el-button
                type="danger"
                class="button info_input"
                @click="showAdminPasswordUpdDialog = true"
                >修改密码</el-button
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      title="修改用户密码"
      width="30%"
      :visible.sync="showAdminPasswordUpdDialog"
      ><div>
        <el-form ref="passwordForm" :rules="rules" :model="passWordInfo">
          <el-form-item prop="oldPass">
            <el-tag type="primary" class="info_tag">旧密码</el-tag>
            <el-input
              v-model="passWordInfo.oldPass"
              size="medium"
              type="password"
              class="password_input"
            ></el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-tag type="primary" class="info_tag">新密码</el-tag>
            <el-input
              v-model="passWordInfo.pass"
              size="medium"
              type="password"
              class="password_input"
            ></el-input>
          </el-form-item>
          <el-form-item prop="repeatPass">
            <el-tag type="primary" class="info_tag">重复新密码</el-tag>
            <el-input
              v-model="passWordInfo.repeatPass"
              size="medium"
              type="password"
              class="password_input"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAdminPasswordUpdDialog = false">取 消</el-button>
        <el-button type="primary" @click="doAdminPasswordUpd">确 定</el-button>
      </div></el-dialog
    >
  </div>
</template>

<script>
export default {
  name: "AdminInfo",
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === this.admin.oldPass) {
        callback(new Error("新旧密码相同!"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.passWordInfo.pass) {
        callback(new Error("两次输入的密码不同!"));
      } else {
        callback();
      }
    };

    //这里存放数据",
    return {
      header: {
        Authorization: window.sessionStorage.getItem("tokenStr")
      },
      admin: [],
      updateInfo: true,
      showAdminPasswordUpdDialog: false,
      //更新密码
      passWordInfo: {
        adminId: null,
        oldPass: null,
        pass: null,
        repeatPass: null
      },

      //ele校验规则
      rules: {
        oldPass: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
          { min: 3, max: 16, message: "长度在 3 到 16 个字符", trigger: "blur" }
        ],
        pass: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur"
          },
          { validator: validatePass, trigger: "blur" }
        ],
        repeatPass: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur"
          },
          { validator: validatePass2, trigger: "blur" }
        ]
      }
    };
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    initAdmin() {
      this.getRequest("/admin/info").then(resp => {
        if (resp) {
          this.admin = resp;
        }
      });
    },
    //更新个人信息
    doAdminInfoUpd() {
      this.putRequest("/admin/info", this.admin).then(resp => {
        if (resp) {
          this.updateInfo = true;
          this.initAdmin();
        }
      });
    },
    //修改密码
    doAdminPasswordUpd() {
      this.$refs["passwordForm"].validate(valid => {
        if (valid) {
          this.$confirm(
            "此操作将修改当前用户密码并退出登录,是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "waring"
            }
          ).then(() => {
            this.passWordInfo.adminId = this.admin.id;
            delete this.passWordInfo.repeatPass;
            console.log(this.passWordInfo);
            this.putRequest("/admin/pass", this.passWordInfo).then(resp => {
              if (resp) {
                this.passWordInfo = "";
                this.postRequest("/logout").then(resp => {
                  if (resp) {
                    window.sessionStorage.removeItem("tokenStr");
                    window.sessionStorage.removeItem("user");
                    this.$store.commit("initRoutes", []);
                  }
                  this.$router.replace("/");
                });
              }
            });
          });
        }
      });
    },
    //上传头像
    beforeAvatarUpload() {
      this.$confirm("此操作将修改当前用户头像,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "waring"
      });
    },
    handleAvatarSuccess() {
      this.initAdmin();
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {},

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {},
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {},

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.initAdmin();
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {},
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {},
  //生命周期 - 销毁之前",
  beforeDestroy() {},
  destroyed() {},
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {}
};
</script>

<style>
.AdminInfo .userForm {
  display: flex;
  justify-content: center;
}
.AdminInfo .time {
  font-size: 13px;
  color: #999;
}

.AdminInfo .bottom {
  margin-top: 13px;
  line-height: 12px;
}

.AdminInfo .button {
  float: right;
}

.AdminInfo .image {
  width: 100%;
  height: 160px;
  display: flex;
  justify-content: center;
  padding: 30px 0;
  background-color: rgba(95, 158, 160, 0.5);
}

.AdminInfo .clearfix:before,
.AdminInfo .clearfix:after {
  display: table;
  content: "";
}

.AdminInfo .clearfix:after {
  clear: both;
}
.AdminInfo .info_input {
  margin: 10px 10px;
}
.AdminInfo .info_tag {
  width: 15%;
  text-align: center;
}
.AdminInfo .password_input {
  margin: 10px 30px;
  width: 75%;
}
</style>
